<template>
    <div class="basket">
        <div class="empty" v-if="!list.length">
            <h1>再也不会忘记买葱了</h1>
            <p>将用料丢进菜篮子,每次去超市就不会忘记买需要的东西了</p>
        </div>
        <button class="add" @click="show.menu=true">+</button>
        <ul class="menu-list">
            <li v-for="(d,i) in list" :key="d.name">
                <menu-box :menu="d" @del="list.splice(i,1)" @add="onAddItem(i)" @toggle="toggleItem(i,$event)">

                </menu-box>
            </li>
        </ul>
        <menu-modal v-show="show.menu" @add="onAddMenu" @close="show.menu=false"></menu-modal>
        <item-modal
            v-show="show.item"
            @save="onSaveItem"
            @close="show.item=false"
        ></item-modal>
    </div>
</template>

<script>
import MenuModal from './components/MenuModal.vue'
import ItemModal from './components/ItemModal.vue'
import MenuBox from './components/MenuBox.vue'
    export default {
        components:{MenuModal,ItemModal,MenuBox},
        data(){
            return {
                show:{
                    menu:false,
                    item:false
                },
                list:[],
                //当前添加用料的菜单id,在哪个菜单上点击"添加用料"了
                addMenuIndex:-1,
                // name:""
            }
        },
        methods:{
            onAddMenu(name){
                this.list.unshift({
                    name,
                    items:[]
                });
                this.show.menu=false
            },
            //添加用料,先把对应的菜单下标存起来,并将弹窗显示
            onAddItem(i){
                this.addMenuIndex=i;
                this.show.item=true;
                this.name=this.list[this.addMenuIndex].name
            },
            onSaveItem(item){
                this.list[this.addMenuIndex].items.push({...item,done:false})
                this.show.item=false
            },
            toggleItem(i,name){
                const menu = this.list[i];
                const j = menu.items.findIndex(item=>item.name===name)
                menu.items[j].done=!menu.items[j].done
            }
        },
        watch:{
            list:{
                deep:true,
                handler(){
                    localStorage.setItem('basket',JSON.stringify(this.list))
                }
            }
        },
        created(){
            this.list=JSON.parse(localStorage.getItem('basket'))|| []
        }
    }
</script>

<style lang="sass" scoped>
.basket
    position: fixed
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: #fff
    .empty
        text-align: center
        h1
            padding: 45px 0 26px
            font-size: 24px
        p
            font-size: 14px
    .add
        position: absolute
        bottom: 20px
        right: 15px
        width: 50px
        height: 50px
        line-height: 50px
        background: #e86f58
        border: 2px solid #e75a3f
        color: #fff
        border-radius: 50%
        text-align: center
        font-size: 40px
        box-shadow: 0 0 10px 0 #ccc
</style>
